<template>
	<view class="invoice">
		<view v-if="!isEdit">
			<u-swipe-action @click="handleDel" :options="options">
				<view class="invoice-detail">
					<view class="detail-item">
						<view class="item-left">
							发票类型：
						</view>
						<view class="item-right">
							{{(invoiceObj.receiptType?'专票':'普票') || ''}}
						</view>
					</view>
					<view class="detail-item">
						<view class="item-left">
							抬头类型：
						</view>
						<view class="item-right">
							{{(invoiceObj.receiptTitleType?'单位':'个人') || ''}}
						</view>
					</view>
					<view class="detail-item">
						<view class="item-left">
							发票抬头：
						</view>
						<view class="item-right">
							{{invoiceObj.receiptTitle || ''}}
						</view>
					</view>
					<view class="detail-item" v-if="invoiceObj.receiptTitleType">
						<view class="item-left">
							税号：
						</view>
						<view class="item-right">
							{{invoiceObj.taxpayerId || ''}}
						</view>
					</view>
					<view class="detail-edit" @click="handleEdit">
						修改
					</view>
					<!-- <view class="detail-del" @click="handleDel">
					删除
				</view> -->
				</view>
			</u-swipe-action>
		</view>
		<view class="invoice-add" v-else>
			<u-form :model="form" ref="uForm" label-width="140">
				<u-form-item label="发票类型" prop="receiptType" required>
					<u-radio-group v-model="form.receiptType">
						<u-radio :name="false">
							普票
						</u-radio>
						<u-radio :name="true">
							专票
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="抬头类型" prop="receiptTitleType" required>
					<u-radio-group v-model="form.receiptTitleType">
						<u-radio :name="false">
							个人
						</u-radio>
						<u-radio :name="true">
							单位
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="发票抬头" prop="receiptTitle" required>
					<u-input v-model="form.receiptTitle" />
				</u-form-item>
				<u-form-item label="税号" v-if="form.receiptTitleType==true" prop="taxpayerId" required>
					<u-input v-model="form.taxpayerId" />
				</u-form-item>
			</u-form>
			<view class="detail-save" @click="save">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInvoice,
		saveInvoice,
		delInvoice,
		updateInvoice
	} from '@/api/invoiceAndBankCard'
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				invoiceObj: {
					receiptType: false,
					receiptTitleType: true,
					receiptTitle: "XXXXX有限公司",
					taxpayerId: "55662148863234567"
				},
				isEdit: false,
				form: {
					receiptType: false,
					receiptTitleType: true,
					receiptTitle: '',
					taxpayerId: ''
				},
				rules: {
					receiptTitle: [{
						required: true,
						message: '请输入发票抬头',
						trigger: ['change', 'blur'],
					}],
					taxpayerId: [

						{
							validator: (rule, value, callback) => {
								if (this.form.receiptTitleType) {
									return /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(
										value);
								} else {
									return true;
								}

							},
							message: '税号格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur']
						}
					]
				}
			};
		},
		onReady() {
			if (this.isEdit) {
				this.$refs.uForm.setRules(this.rules);
			}
		},
		mounted() {
			// this.isEdit=true
			this.getInvoiceInfo()
		},
		methods: {
			getInvoiceInfo() {
				getInvoice().then((res) => {
					if (res.data.code == 200 && res.data.result.records && res.data.result.records.length > 0) {
						this.invoiceObj = res.data.result.records[0]
					} else {
						this.invoiceObj = null
						this.isEdit = true
						this.reset()
						setTimeout(() => {
							this.$refs.uForm.setRules(this.rules);
						}, 0)
					}
				});
			},
			handleEdit() {
				this.isEdit = true
				this.form = this.invoiceObj
				setTimeout(() => {
					this.$refs.uForm.setRules(this.rules);
				}, 0)
			},
			save() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.form.receiptTitleType) {
							this.form.taxpayerId = ''
						}
						if (this.form && this.form.id) {
							updateInvoice(this.form).then(res => {
								if (res.data.code === 200) {
									uni.showToast({
										title: "保存成功",
										duration: 2000,
										icon: "none",
									});
									this.isEdit = false
									this.getInvoiceInfo()
									this.reset()
								}
							})
						} else {
							saveInvoice(this.form).then(res => {
								if (res.data.code === 200) {
									uni.showToast({
										title: "保存成功",
										duration: 2000,
										icon: "none",
									});
									this.isEdit = false
									this.getInvoiceInfo()
									this.reset()
								}
							})
						}
					}
				});
			},
			reset() {
				this.form = {
					receiptType: false,
					receiptTitleType: true,
					receiptTitle: '',
					taxpayerId: ''
				}
			},
			handleDel() {
				delInvoice({
					id: this.invoiceObj.id
				}).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: "删除成功",
							duration: 2000,
							icon: "none",
						});
						this.getInvoiceInfo()
					}
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.invoice {
		padding: 20rpx;

		/deep/.u-swipe-action {
			border-radius: 16rpx;
		}

		.invoice-detail {
			background: #FFFFFF;
			box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			padding: 40rpx;
			position: relative;

			.detail-item {
				display: flex;
				justify-content: flex-start;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 400;
				padding: 15rpx 0;
			}

			.detail-edit {
				position: absolute;
				top: 50rpx;
				right: 40rpx;
				color: rgba(89, 131, 255, 1);
				font-size: 26rpx;
				font-weight: 400;
			}

			.detail-del {
				width: 80%;
				height: 76rpx;
				background: linear-gradient(162.65deg, rgba(255, 98, 0, 1) 0%, rgba(240, 139, 67, 0.65) 100%);
				border-radius: 46rpx;
				margin: 50rpx auto 0;
				text-align: center;
				line-height: 76rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
			}
		}

		.invoice-add {
			background: #FFFFFF;
			box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			padding: 40rpx;

			.detail-save {
				width: 80%;
				height: 76rpx;
				background: linear-gradient(270deg, rgba(118, 194, 245, 1) 0%, rgba(18, 125, 255, 1) 100%);
				border-radius: 40rpx;
				margin: 50rpx auto 0;
				text-align: center;
				line-height: 76rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
	}
</style>
